<!-- 
 * 专家学者管理
 * @author: 
 * @since: 2022-05-11
 * index.vue
-->
<template>
    <div class="professor-container h100">
        <router-view v-show="routerCutLevel === 3" class="detailsPage"></router-view>
        <div v-show="routerCutLevel === 2" class="listPage">
            <div class="search">
                <Filters :formModel="state.formModel" :formLabel="state.formLabel" @reset="reset" @filter="filter"></Filters>
            </div>
            <div class="table">
                <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" :btnData="state.btnData" @getCurrentChange="getCurrentChange" @comEvent="comEvent" @colSelect="colSelect" @refresh="getProfessorList()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" handleWidth="170">
                    <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn>
                </TableCom>
            </div>
        </div>
        <!-- 上传文件 -->
        <el-dialog v-model="isShowLead" title="批量导入需求" width="30%" :before-close="() => (isShowLead = false)">
            <uploadDownload @upload="uploadFile" @downloadTemp="downloadFile"></uploadDownload>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { sessionstorage } from '@/utils/storage.js'
import { successHandle, colFilters, tableIsEnable, batchHandle, fileDownload } from '@/utils/common.js'
import { getCityInfoApi } from '@/api/interface/scientific.js'
import { getProfessorListApi, professorBatchApi } from '@/api/interface/professor.js'
import { getDomainApi } from '@/api/public/publicDict.js'
import { uploadOtherFileApi, dowloadOtherFileApi } from '@/api/public/uploadFile.js'
import { ElMessage } from 'element-plus'


const router = useRouter();
const store = useStore();

const state = reactive({
    formModel: {//专家学者搜索列表的参数
        zhName: '',//名字
        technoSphere: '',//研究领域名称
        provinceCode: '',//省份
        keyword: '',//关键词
    },
    formLabel: [
        {
            label: '姓名',
            model: "zhName",
            type: "text",
            width: '160',
            placeholder: '请输入专家名称',
        },
        {
            label: '研究领域',
            model: "technoSphere",
            type: "select",
            width: '160',
            placeholder: '请选择研究领域',
            option: [],
        },
        {
            label: '所在地',
            model: "provinceCode",
            type: "select",
            width: '160',
            placeholder: '请选择所在地',
            option: [],
        },

        {
            label: '关键词',
            model: "keyword",
            type: "text",
            width: '160',
            placeholder: '请输入关键词',
        },
    ],
    tableData: [],
    tableHeader: [
        {
            label: '姓名',
            prop: "zhName",
            isLink: true,
            function: 'detail'
        },
        {
            label: '性别',
            prop: "sex",
        },
        {
            label: '照片',
            prop: "logoUrl",
            isImg: true,
        },
        {
            label: '所在单位',
            prop: "company",
        },
        {
            label: '所在单位职务',
            prop: "job",
        },
        {
            label: '所在地',
            prop: "allAddress",
        },
        {
            label: '最高学位',
            prop: "highDegree",
        },
        {
            label: '研究领域',
            prop: "technoSphere",
        },
        {
            label: '博士生导师',
            prop: "isSupervisor",
            yesOrNo: true
        },
        {
            label: '两院院士',
            prop: "isAcademician",
            yesOrNo: true
        },
        {
            label: '联系方式',
            prop: "phone",
        },
        {
            label: '状态',
            prop: "valid",
            status: true
        },
    ],
    btnData: [
        {
            name: '编辑',
            icon: 'bianji',
            color: '#25D390',
            change: 'edit'
        },
        {
            name: '删除',
            icon: 'shanchu',
            color: '#F74B33',
            change: 'del'
        },
        {
            name: '是否启用',
            isStart: true,
            prop: 'valid',
            change: 'enable'
        },
        // {
        //     name: '是否热门',
        //     isStart: true,
        //     prop: 'isHot',
        //     change: 'hot'
        // },
        // {
        //     name: '是否推荐',
        //     isStart: true,
        //     prop: 'isRecommend',
        //     change: 'recommend'
        // },
    ],
    pagination: {//分页
        currentPage: 1,
        size: 10,
        total: 0,
    },
    selectTableId: [],//选择表格数据

})

//区域加载
const loading = ref(true)

//导入模版
const isShowLead = ref(false)

//专家学者模块功能按钮
const btnList = reactive([
    {
        name: '新增专家学者',
        icon: '',
        bgColor: '#25D390'
    },
    {
        name: '专家导入',
        icon: '',
        bgColor: '#00A2FF'
    },
    {
        name: '批量启用',
        icon: 'qiyong',
        bgColor: '#00A2FF'
    },
    {
        name: '批量禁用',
        icon: 'forbid',
        bgColor: '#FFB018'
    },
    {
        name: '批量删除',
        icon: 'shanchu',
        bgColor: '#F74B33'
    },


])

const routerCutLevel = computed(() => {
    return store.getters['setting/routerCutLevel']
})

onMounted(() => {
    getCityInfo()
    getProfessorList()
    getDomain()

})
//获取所属领域
const getDomain = () => {
    getDomainApi({ parentId: 0 }).then(res => {
        const { status, data } = res
        if (status === 200) {
            state.formLabel[1].option = data.map(item => ({
                ...item,
                value: item.id,
                key: item.keyName
            }))
        }
    })


}
//获取行政区域编码
const getCityInfo = () => {
    const params = {
        criSuperiorCode: '000000',
    }
    getCityInfoApi(params).then(res => {
        const { status, data } = res
        if (status === 200) {
            state.formLabel[2].option = data.map(item => ({
                key: item.criName,
                value: item.criCode
            }))


        }
    })

}

//获取专家学者列表
const getProfessorList = () => {
    loading.value = true
    const params = {
        ipi: state.pagination.currentPage,//当前页
        ips: state.pagination.size,//条数
        zhName: state.formModel.zhName,//姓名
        technoSphere: state.formModel.technoSphere,//研究领域
        provinceCode: state.formModel.provinceCode,//省
        keyword: state.formModel.keyword,//关键字
    }
    getProfessorListApi(params).then(res => {
        const { data, status } = res
        if (status === 200) {
            loading.value = false
            state.tableData = data.result
            state.pagination.total = data.total
            state.pagination.currentPage = data.pageNum
            state.pagination.size = data.pageSize

        }
    })

}

//点击专家学者操作按钮
const clickHandle = (index) => {
    switch (index) {
        case 0://新增科研机构
            router.push({ name: 'ProfessorAdd' }).catch(() => { })
            break;
        case 1://专家导入
            isShowLead.value = true

            break;
        case 2://批量启用
            batchHandle(state.selectTableId, 'START', () => {
                professorBatchHandle('START')
            })
            break;
        case 3://批量禁用
            batchHandle(state.selectTableId, 'STOP', () => {
                professorBatchHandle('STOP')
            })
            break;
        case 4://批量删除
            batchHandle(state.selectTableId, 'DEL', () => {
                professorBatchHandle('DEL')
            })
            break;
    }
}
//上传文件
const uploadFile = (data) => {
    let fd = new FormData()
    fd.append('file', data.file);
    fd.append('dataType', 'PERSON')
    uploadOtherFileApi(fd).then(res => {
        isShowLead.value = false
        ElMessage.success(res.message)
        getProfessorList()
    })
}
//下载文件
const downloadFile = () => {
    dowloadOtherFileApi({ dataType: 'PERSON' }).then(res => {
        fileDownload({
            fileSuffix: 'xlsx',
            name: '专家学者导入模板'
        }, res)
    })
}

//搜索
const filter = () => {
    getProfessorList();
}
//重置
const reset = () => {
    for (let key in state.formModel) {
        state.formModel[key] = ''
    }
    getProfessorList();
}
//点击当前页
const getCurrentChange = (val) => {
    state.pagination.currentPage = val;
    getProfessorList()
}

//点击条数
const getSizeChange = (val) => {
    state.pagination.size = val;
    getProfessorList()
}
//表格中的操作
const comEvent = (type, data) => {
    switch (type) {
        case 'edit'://编辑
            sessionstorage.set('professorItem', data)
            router.push({ name: 'ProfessorEdit', data }).catch(() => { })
            break;
        case 'del'://删除
            tableIsEnable(state.tableData, 'del', data, (newArr) => {
                state.selectTableId = newArr
                professorBatchHandle('DEL')
            })
            break;
        case 'enable'://是否启用
            tableIsEnable(state.tableData, 'valid', data, (newArr) => {
                state.selectTableId = newArr
                !(data.valid) ? professorBatchHandle('START') : professorBatchHandle('STOP')
            })
            break;
        case 'detail'://详情
            sessionstorage.set('professorItem', data)
            router.push({ name: 'ProfessorDetail' }).catch(() => { })
            break;

    }
}
//专家学者批量操作调用接口
const professorBatchHandle = (type) => {
    const params = {
        batchType: type,
        ids: state.selectTableId
    }
    professorBatchApi(params).then(res => {
        successHandle(res)
        getProfessorList()
    })

}

//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
    if (type === 'filter') {
        const currentData = colFilters(data, e, currentItem, state.tableHeader)
        state.tableHeader = currentData;
    } else {//全选/全取消
        state.tableHeader = data;
    }
}

//选择表格数据
const getSelectChange = (row) => {
    state.selectTableId = row.map(item => item.id)
}


</script>

<style lang="scss" scoped></style>
